/**
 * 商品信息录入
 */
import React, { Component } from "react";
import "./FormInfo.scss";

export default class FormInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            brand: '',
            goodsName: '',
            model: '',
            category: '',
            intoDatetime: '',
            quantity: '',
            price: ''
        }
    }

    componentDidMount() {
        const goodsInfo = this.props.location.state;
        if(goodsInfo) {
            this.setState({
                goodsID: goodsInfo.goodsID,
                brand: goodsInfo.brand,
                goodsName: goodsInfo.goodsName,
                model: goodsInfo.model,
                category: goodsInfo.category,
                intoDatetime: goodsInfo.intoDatetime.replace(' ','T'),
                quantity: goodsInfo.quantity,
                price: goodsInfo.price
            })
        }
    }
    // 设置表单的值
    setFormElementVal = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    /**
     * 确认修改数据
     */
    confirmUpdate = () => {
        const params = new URLSearchParams();
        params.append('goodsID', this.state.goodsID);
        params.append('brand', this.state.brand);
        params.append('goodsName', this.state.goodsName);
        params.append('model', this.state.model);
        params.append('category', this.state.category);
        params.append('intoDatetime', this.state.intoDatetime);
        params.append('quantity', this.state.quantity);
        params.append('price', this.state.price);

        React.axios.post('/store-manage/common/goods-manage/goods-update.php', params)
            .then(res => {
                alert(res.data);
                // 如果服务器返回成功结果
                if(res.data.includes('成功')) {
                    this.props.history.goBack();
                }
            });
    }

    render() {
        return (
            <div className="container">
                <h1>商品信息录入</h1>
                <form className="formInfo">
                    <div className="formLine">
                        <label>商品品牌：</label>
                        <input 
                            name="brand" 
                            type="text"
                            placeholder="请输入该商品的品牌"
                            value={this.state.brand}
                            onChange={this.setFormElementVal}
                        />
                        <span className="required">*</span>
                    </div>
                    <div className="formLine">
                        <label>商品名称：</label>
                        <input 
                            name="goodsName" 
                            type="text"
                            placeholder="请输入该商品的名称"
                            value={this.state.goodsName}
                            onChange={this.setFormElementVal}
                        />
                        <span className="required">*</span>
                    </div>
                    <div className="formLine">
                        <label>商品型号：</label>
                        <input 
                            name="model" 
                            type="text"
                            placeholder="请输入该商品的型号"
                            value={this.state.model}
                            onChange={this.setFormElementVal}
                        />
                    </div>
                    <div className="formLine">
                        <label>所属分类：</label>
                        <select
                            name="category" 
                            value={this.state.category}
                            onChange={this.setFormElementVal}
                        >
                            <option value="">-- 请选择 --</option>
                            <option value="数码电器 / 办公用品">数码电器 / 办公用品</option>
                            <option value="食品饮料 / 厨房用品">食品饮料 / 厨房用品</option>
                            <option value="服装鞋包 / 化妆洗护">服装鞋包 / 化妆洗护</option>
                            <option value="家居家装 / 家用纺织">家居家装 / 家用纺织</option>
                            <option value="汽车配件 / 汽车用品">汽车配件 / 汽车用品</option>
                            <option value="运动户外 / 文娱艺术">运动户外 / 文娱艺术</option>
                            <option value="钟表珠宝 / 计生医疗">钟表珠宝 / 计生医疗</option>
                            <option value="其它分类">其它分类</option>
                        </select>
                        <span className="required">*</span>
                    </div>
                    <div className="formLine">
                        <label>入库时间：</label>
                        <input 
                            name="intoDatetime" 
                            type="datetime-local"
                            value={this.state.intoDatetime}
                            onChange={this.setFormElementVal}
                        />
                        <span className="required">*</span>
                    </div>
                    <div className="formLine">
                        <label>入库数量：</label>
                        <input 
                            name="quantity" 
                            type="number"
                            placeholder="该商品此次入库的数量"
                            value={this.state.quantity}
                            onChange={this.setFormElementVal}
                        />
                        <span className="required">*</span>
                    </div>
                    <div className="formLine">
                        <label>商品单价：</label>
                        <input 
                            name="price" 
                            type="number"
                            placeholder="该商品的成本单价"
                            value={this.state.price}
                            onChange={this.setFormElementVal}
                        />
                        <span className="required">*</span>
                    </div>
                    <div className="btnGroup">
                        <label></label>
                        
                        {
                            this.props.location.state 
                            ?
                            <button 
                                type="button" 
                                onClick={() => {
                                    this.props.history.goBack();
                                }}
                            >取消</button>
                            :
                            <button 
                                type="reset"
                            >重置</button>
                        }
                        {
                            this.props.location.state 
                            ?
                            <button 
                                className="btn-add"
                                type="button" 
                                onClick={this.confirmUpdate}
                            >确认修改</button>
                            :
                            <button
                                className="btn-edit" 
                                type="button"
                            >确认录入</button>
                        }
                    </div>
                </form>
            </div>
        );
    }
}
